<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>Document</title>
</head>

<body>
    在哪些场景，或者说哪些时候用computed？
    <div id="app"></div>
    <script>
        new Vue({
            el: '#app',
            computed: {
                // 节点状态
                status() {
                    return this.data.status;
                },
                // 是否是自动通过
                isAutoAdopt() {
                    // 下一个节点
                    const nextNode = this.nextData;
                    return nextNode.nodeType === approvalFlowNodeTypeConfig.approval && nextNode.realName &&
                        nextNode.realName === this.data.realName;
                },
                statusText() {
                    const status = this.status;
                    let res = {
                        text: '',
                        style: ''
                    };
                    if (status === flowNodeApprovalStatusConfig.adopt) {
                        res.text = this.isAutoAdopt ? '自动通过' : '已通过';
                        res.style = 'color: #67C33F';
                    } else if (status === flowNodeApprovalStatusConfig.reject) {
                        res.text = '已驳回';
                        res.style = 'color: #F75151';
                    } else if (status === flowNodeApprovalStatusConfig.processing) {
                        res.text = '审批中';
                        res.style = 'color: #5687FF';
                    } else if (status === flowNodeApprovalStatusConfig.revoke) {
                        res.text = '已撤销';
                        res.style = 'color: #666';
                    }
                    /* else if (status === flowNodeApprovalStatusConfig.unprocessed) {
                      res = '未审批';
                    } */
                    return res;
                },
                realName() {
                    return (this.data.realName && this.data.realName.split(',').join('/')) || this.data
                        .roleName || '-';
                },
                current() {
                    const obj = this.list.find(i => i.key === this.curKey);
                    return obj || {};
                },
                innerValue: {
                    get() {
                        return this.value;
                    },
                    set(value) {
                        this.$emit('input', value);
                    }
                },
                tableData() {
                    return [{
                        name: `${this.data.tableName}默认布局`
                        // terminate: '终端'
                    }];
                },
                ...mapGetters(['isAdministrator'])
            }
        })
    </script>
</body>

</html>